<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <button class="set">创建</button>
    <button class="get">获取</button>

    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
<script>
    // 使用cookie需要注意的问题
    // 1. cookie存储在用户本地(客户端) 
    // 2. cookie不能跨浏览器
    // 3. cookie不能跨网站
    // 4. cookie是键值对形式的字符串, 存储字符串以外的类型=>隐式的转化为字符串
    //    如果需要存储数组和对象 =>需要借助 JSON 的相关方法 (可以在保留数组和对象结构的情况下 将数组和对象转化为字符串(字符串化) 并将JSON字符串解析为数组和对象)
    // 5. 有些浏览器在使用中文时，会出现乱码。
    // > 在设置cookie时，通过encodeURIComponent 编码，在获取cookie时，通过decodeURIComponent 解码
    // 6. cookie 依赖于服务器环境 ，即设置和获取cookie时，要用 http 访问网页。火狐除外


    // cookie   ctrl +shift +T
    // theFirstDay




    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];

    set.onclick = function () {
        var user = "张三";
        setCookie("user", encodeURIComponent(user), 31);
        setCookie("pwd", "123123", 31);
        setCookie("phone", "17386141517", 31);
        setCookie("email", "123123@qq.com", 31);

        setCookie("num", 100, 31);
        setCookie("bool", true, 31);

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2, c: 3 };
        setCookie("arr", JSON.stringify(arr), 31);
        setCookie("obj", JSON.stringify(obj), 31);
    }

    get.onclick = function () {
        var user = getCookie("user");
        user = decodeURIComponent(user);
        console.log(user);

        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));
        console.log(getCookie("num"));
        console.log(getCookie("bool"));
        // console.log(getCookie("arr"));
        // console.log(getCookie("obj"));

        var arrStr = getCookie("arr");
        var arr = JSON.parse(arrStr);
        console.log(arr);

        var objStr = getCookie("obj");
        var obj = JSON.parse(objStr);
        console.log(obj);
    }


</script>

</html>